<template>
	<div class="beizhu">
		<div class="header">
			<router-link to="">
				<img src="../assets/jtz.png" alt="">
			</router-link>
			<p id="sp">订单备注</p>
		</div>
		<div class="ksbz">
			<p class="bb">快速备注</p>
			<ul>
				<li>
					<span class="ss">黄兵不要脸</span>
					<span>黄兵要点脸</span>
					<span>黄兵多要脸</span>
				</li>
				<li>
					<span class="ss">不要香菜</span>
					</li>
				<li>
					<span class="ss">不要洋葱</span>
				</li>
				<li>
					<span class="ss">多点醋</span>
				</li>
				<li>
					<span class="ss">多点葱</span>
				</li>
				<li>
					<span class="ss">去冰</span>
					<span>少冰</span>
				</li>
			</ul>
		</div>
		<div class="foot">
			<!-- placeholder="请输入备注内容(可不填)" -->
			<p class="qt">其他备注</p>
			<textarea name="" id="" cols="30" rows="10" placeholder="请输入备注内容(可不填)"></textarea>
		</div>
		<div class="end">
			确定
		</div>
	</div>
</template>

<script>

</script>

<style scoped>
	* {
		padding: 0;
		margin: 0;
		list-style: none;
	}

	.beizhu {
		overflow: hidden;
		width: 100%;
		background: rgba(0, 0, 0, 0.01);
	}

	.header {
		position: fixed;
		height: 3rem;
		background: #3190e8;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000000;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;

	}

	.header img {
		position: absolute;
		top: 0;
		left: 0;
		width: 2.6rem;
	}

	#sp {
		font-size: 1.3rem;
		color: white;
		font-weight: 570;
		margin: 0 auto;
	}

	.ksbz {
	  padding-top: 3.5rem;
      background: white;
	  padding-bottom: 2rem;
	}
	.bb{
		/* background: #00FF00; */
		margin: 0 1rem;
		font-size: 1.1rem;
		padding: 0.3rem 0;
	}
	ul{
		background: white;
		margin: 0 1rem;
	}
	ul li{
		display: inline-block;
		border: 1px solid #3190e8;
		margin-right: 1rem;
		margin-top: 1rem;
		padding: 0.4rem 0;
		border-radius: 12px;
	}
	li span{
		padding: 0.5rem;
		border-left: 1px solid #3190e8;
	}
	.ss{
		border-left: 0;
	}
	.foot{
		margin-top: 1rem;
		background: white;
		padding-bottom: 2rem;
	}
	.qt{
		/* padding: 1rem; */
		padding: 0.7rem 2rem;
	}
	textarea{
		border: .025rem solid #eee; 
		outline:medium;
		border-radius: 13px;
		width: 20rem;
		height: 7rem;
		background: rgba(0,0,0,0.06);
		margin-left: 1.5rem;
		text-indent:1rem;
		padding-top: 0.5rem;
		font-size: 1.2rem;
	}
	.end{
		
		text-align: center;
		background: #4cd964;
		color: white;
		margin:  0 0.7rem;
		line-height: 2.8rem;
		border-radius: 0.2rem;
	}
	
</style>
